<template>
  <div>
    <Meta pagealias="cityinfo_tellist" :query_data="{keyword:params.keywords,cityinfo_telbook_cid:$route.params.id}" />
    <Head>{{currentTitle}}</Head>
    <ul class="list_wrapper">
      <van-empty image="search" description="没有找到数据" style="background-color:#fff" v-if="show_empty === true"/>
      <van-list v-model="loading" @load="onLoad" :finished="finished" :finished-text="finishedText" :immediate-check="false">
        <li class="list_item" v-for="(item, index) in phoneBookList " :key="index" @click="$router.push(`/cityinfo/book/${id}/${item.id}`)">
          <div class="img">
            <img :src="item.logo_url" alt="">
          </div>
          <div class="text">
            <p class="text_1">{{item.name}}</p>
            <p class="text_2 substring">{{item.telephone}}</p>
          </div>
          <div class="tel_icon">
            <img src="../../../assets/images/cityinfo/tel-book-list-icon.png">
          </div>
        </li>
      </van-list>
    </ul>
  </div>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
export default{
  data () {
    return {
      id: null,
      phoneBookList: [],
      currentTitle: '',
      loading: false,
      finished: false,
      finishedText: '',
      show_empty: false,
      params: {
        keywords: '',
        page: 1,
        pagesize: 10,
        type_id: ''
      }
    }
  },
  created () {
    this.id = this.$route.params.id
    this.params.keywords = this.$route.query.keywords
    if (this.id) {
      http.get(api.phone_book_type).then((res) => {
        let current = res.data.filter(res => {
          return parseInt(res.id) == this.id
        })[0]
        this.currentTitle = current.title
      })
    }
    this.getListData(true)
  },
  mounted () {
  },
  methods: {
    getListData (init) {
      this.show_empty = false
      this.params.type_id = this.id
      if (init === true) {
        this.params.page = 1
        this.params.pagesize = 10
        this.finishedText = ''
        this.finished = false
      }
      http.get(api.phone_book_list, this.params).then(res => {
        if (init == true) {
          this.phoneBookList = res.data.list
        } else {
          this.phoneBookList = this.phoneBookList.concat(res.data.list)
        }
        this.loading = false
        if (res.data.list.length < this.params.pagesize) {
          this.finished = true
          if (init === false) {
            this.finishedText = '没有更多了'
          } else if (res.data.list.length === 0) {
            this.show_empty = true
            this.finishedText = ''
          }
        }
      })
    },
    onLoad () {
      this.loading = true
      // console.log(this.loading)
      if (!this.show_empty) {
        this.params.page++
        this.getListData(false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list_wrapper{
  margin: 0 10px;
  .list_item{
    width: 100%;
    display: flex;
    border-bottom: 1px solid #d5d5d5;
    line-height: 1.5;
    padding: 24px 0;
    .img{
      width: 45px;
      height: 45px;
      margin: 0 27px 0 18px;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .text{
      width: 200px;
      margin-right: 20px;
      .text_1{
        color:#08050a;
        font-size: 15px;
        font-weight: bold;
      }
      .text_2{
        color:#555555;
        font-size: 13px;
      }
    }
    .tel_icon{
      width: 35px;
      height: 35px;
      margin-right: 13px;
      img{
        width: 35px;
        height: 35px;
      }
    }
  }
}
</style>
